<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>05-v-for</title>
</head>
<body>
<div id="app">
    <div>
        <ul>
            <li v-for="group in groups" :key="group.id">
                id：{{ group.id }}，门派名称：{{ group.name }}，门派人数：{{ group.num }}
                <br/>
                <div v-for="(v, k, index) in group">
                   键值对{{ index }}：【 {{k}} => {{ v }} 】
                </div>
            </li>
        </ul>
    </div>
    <ul>
        <li v-for="(num, index) in nums" :key="index">{{num}}</li>
    </ul>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            "groups": [
                {"id": 1, name: "古影门", num: 18},
                {"id": 2, name: "极地宗", num: 21},
                {"id": 3, name: "玄霜星派", num: 26}
            ],
            nums: [3, 1, 4, 1, 5]
        }
    });
</script>
</body>
</html>